// 商品图片选项卡部分
class Tap{
    constructor(ops){
        this.tBox = ops.top;
        this.bBox = ops.bottom;
        this.left = ops.left;
        this.right = ops.right;
        this.magnify = ops.magnify;
        this.aBig=ops.big_img;
        this.box=ops.box;
        this.addEvent();

    }
    addEvent(){
        const that = this;
        for(var i = 0;i<this.bBox.length;i++){
            this.bBox[i].onclick=function(){
                that.tBox.innerHTML="";
                // console.log(that.index)
                // console.log(that.bBox)

                if(this===that.bBox[0]){
                    that.magnify.style.display="none";
                    that.tBox.innerHTML='<video src="imgs/v.f30.mp4" controls="controls"  preload="auto" autoplay="autoplay"></video>'
                }else{
                    that.tBox.innerHTML=this.innerHTML;
                    that.magnify.style.display="block";
                    that.Event();
                    // console.log(that.tBox.innerHTML);
                    that.inner=that.tBox.innerHTML;
                    const arr = [...that.bBox]
                    that.index=arr.indexOf(this);


                }

            }
        }
    }
    Event(){
        const that = this;
        this.tBox.onmouseenter=function(){
            that.show(); 
        }
        this.tBox.onmousemove=function(eve){
            that.e = eve || window.event;
            that.move();
        }
        
    }
    
    show(){
        this.aBig[this.index-1].style.display="block";
        this.aBig[this.index-1].style.position="absolute";
        // console.log(this.aBig[this.index-1])

        this.tBox.innerHTML=""
        this.tBox.appendChild(this.aBig[this.index-1]);  
        console.log(this.tBox.innerHTML)


    }
    move(){
       
        let l=this.e.pageX-this.box.offsetLeft;
        let t=this.e.pageY-187;
        
        if(l<0){
            l=0;
        }
        if(t<0){
            t=0;
        }
        // console.log(l*2)

        // console.log(this.aBig[0].offsetWidth-this.tBox.offsetWidth)
        if((l*2)>(this.aBig[this.index-1].offsetWidth-this.tBox.offsetWidth)){

            this.aBig[this.index-1].style.left=-(this.aBig[this.index-1].offsetWidth-this.tBox.offsetWidth)+"px";
        }else{
            this.aBig[this.index-1].style.left=-(l*2)+"px";
        }
        if((t*2)>(this.aBig[this.index-1].offsetHeight-this.tBox.offsetHeight)){
            this.aBig[this.index-1].style.top=-(this.aBig[this.index-1].offsetHeight-this.tBox.offsetHeight)+"px";
        }else{
            this.aBig[this.index-1].style.top=-(t*2)+"px";

        }
        const that = this;
        this.tBox.onmouseleave=function(){
            that.hide();
        }


    }

    hide(){
        // console.log(this.inner)
        this.aBig[0].style.display="none";
        this.tBox.innerHTML=this.inner;
        // console.log(this.tBox.innerHTML)   
    }
}
new Tap({
    top:document.querySelector(".top"),
    bottom:document.querySelectorAll(".bottom div"),
    left:document.querySelector(".bottom .left"),
    right:document.querySelector(".bottom .right"),
    magnify:document.querySelector(".magnify"),
    box:document.querySelector(".mes-inner"),
    big_img:document.querySelectorAll(".top .bigimg"),


})

// 放大镜

// class Glass{
//     constructor(ops){
//         this.top=ops.top;
//         this.aBig=ops.big_img;
//         this.box=ops.box;
//         this.Event();

//     }
    // Event(){
    //     const that = this;
    //     this.top.onmouseenter=function(){
    //         that.show(); 
    //     }
    //     this.top.onmousemove=function(eve){
    //         that.e = eve || window.event;
    //         that.move();
    //     }
        
    // }
    
    // show(){
    //     this.aBig[0].style.display="block";
    //     this.aBig[0].style.position="absolute";

    //     this.top.appendChild(this.aBig[0]);      
    // }
    // move(){
       
    //     let l=this.e.pageX-this.box.offsetLeft;
    //     let t=this.e.pageY-187;
        
    //     if(l<0){
    //         l=0;
    //     }
    //     if(t<0){
    //         t=0;
    //     }
    //     console.log(l*2)

    //     console.log(this.aBig[0].offsetWidth-this.top.offsetWidth)
    //     if((l*2)>(this.aBig[0].offsetWidth-this.top.offsetWidth)){

    //         this.aBig[0].style.left=-(this.aBig[0].offsetWidth-this.top.offsetWidth)+"px";
    //     }else{
    //         this.aBig[0].style.left=-(l*2)+"px";
    //     }
    //     if((t*2)>(this.aBig[0].offsetHeight-this.top.offsetHeight)){
    //         this.aBig[0].style.top=-(this.aBig[0].offsetHeight-this.top.offsetHeight)+"px";
    //     }else{
    //         this.aBig[0].style.top=-(t*2)+"px";

    //     }
    //     this.top.onmouseleave=function(){
    //         this.hide();
    //     }


    // }

    // hide(){
    //     this.aBig[0].style.display="none";
    //     this.top.appendChild(this.aBig[0]); 
    // }

// }
// new Glass({
//     top:document.querySelector(".top"),
//     box:document.querySelector(".mes-inner"),
//     big_img:document.querySelectorAll(".top img"),


// })

const id = location.search.split("=")[1];
const imgmark = document.querySelector("#imgmark");
const titlemark = document.querySelector("#titlemark");
const pricemark = document.querySelector("#pricemark");
const sizemark1 = document.querySelector("#sizemark1");
const sizemark12 = document.querySelector("#sizemark2");
const button = document.querySelector("#cart_button");

// 页面渲染
ajaxPost("http://localhost:3000/api?type=goods",(res)=>{
    res=JSON.parse(res)
    let i = 0;
    res.data.some((val,idx)=>{
        i = idx;
        return val.goodsId === id;
    })
    let aSize = res.data[i].size_price
    console.log((res.data[i].size_price)[0])
    imgmark.setAttribute("src",res.data[i].proImg);
    titlemark.innerHTML=res.data[i].proName;
    sizemark1.innerHTML=aSize[0].size;
    sizemark2.innerHTML=aSize[1].size;
    pricemark.innerHTML=aSize[0].price;

    var size="75ml";
    sizemark1.onclick=function(){
        pricemark.innerHTML=aSize[0].price;
        sizemark1.style.border="1px solid #fa2a83";
        sizemark2.style.border="1px solid #999";
        size = aSize[0].size;
        setLocal(size)
        
    }
    sizemark2.onclick=function(){
        pricemark.innerHTML=aSize[1].price;
        sizemark2.style.border="1px solid #fa2a83";
        sizemark1.style.border="1px solid #999";
        size = aSize[1].size;
        setLocal(size)
    }
    // 点击加入购物车存储数据到本地
    function setLocal(a){
        // console.log(a)
        button.onclick=function(){
            console.log(a)
            // console.log(pricemark.innerHTML)
            if(a){
                console.log(a)
                const goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
                if(goodsMsg.length<1){
                    goodsMsg.push({
                        id:id,
                        num:1,
                        flag:1,
                        size:a,
                        price:pricemark.innerHTML
                        
                    })
                }else{
                    let i = 0;
                    let f = goodsMsg.some((val,idx)=>{
                        i=idx;
                        return val.id === id;
                    })
                    if(f){
                        if(goodsMsg[i].size===a){
                            goodsMsg[i].num++
                        }else{
                            goodsMsg.push({
                                id:id,
                                num:1,
                                flag:1,
                                size:a,
                                price:pricemark.innerHTML
                            })
                        }
                        
                    }else{
                        goodsMsg.push({
                            id:id,
                            num:1,
                            flag:1,
                            size:a,
                            price:pricemark.innerHTML
                        })

                    }
                }
                localStorage.setItem("goodsMsg",JSON.stringify(goodsMsg))
            }else{
                alert("请先选择产品规格")
            }

        }
            

    }
    setLocal()
    


})


// 计算购物车总数量
const goodsMsg =localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
let num =0;
console.log(goodsMsg)
goodsMsg.forEach((val)=>{
    if(val){
        num+=parseInt(val.num)
       
    }

})
console.log(num)




// 登录守卫
let login_mark = document.querySelector("#login_mark");
let register_mark = document.querySelector("#register_mark");
let span_mark = document.querySelector(".span-r");

function defend(){
    if (localStorage.getItem("isLogin")==="OK"){
        login_mark.innerHTML=`<a href="#">
        ${localStorage.getItem("username")}
        <i class="iconfont icon-ico_arrowdown"></i>
        </a>`;
        register_mark.innerHTML=`<a href="./index.html">
        退出
        <i></i>
        </a>`;
        register_mark.onclick=function(){
            localStorage.setItem("isLogin","")
        };
        span_mark.innerHTML=num
    
    
        }else{login_mark.innerHTML=`<a href="./login.html">
            请登录
            <i class="iconfont icon-ico_arrowdown"></i>
            </a>`;
            register_mark.innerHTML=`<a href="./register.html">
            注册
            <i></i>
            </a>`;
            span_mark.innerHTML=0
        
        }
    nav()


}
defend()

